<template>
	<div class="add-app">
		
		<!--滚动内容 start-->
		<el-scrollbar class="app-container-scroll-bar">
			
			<pageTitle :hasBack="true" :title="pageTitle" ></pageTitle>
			
			<card :data="cardData" icon-class="icon-cangku"></card>
			
			<deployConfig
				ref="deployConfig"
				:deployTypeProp="deployType"
				:templateTypeProp="templateType"
				></deployConfig>
			
			<el-row style="margin:20px">
				<el-col align="right">
					<el-button
						:disabled="loading"
						 type="primary" @click="startDeploy">
						立即部署
					</el-button>
				</el-col>
			</el-row>
			
    </el-scrollbar>
    <!--滚动内容 end -->
		
		
		<!--弹窗内容 start-->
		<div class="app-output-window">
			
			
			
		</div>
		<!--弹窗内容 end-->
		
	</div>
</template>

<script>
	import pageTitle from "@/view/layout/components/content/pageTitle";
	import card from '@/view/components/card/detailCard.vue';
	import {getTemplateById} from'@/service/swagger/AcTemplateController'
	import {deployTypeFilter} from '@/filters/status/index';
	import {tmpStatusFilter} from '@/filters/status/index';
	import {deploy} from'@/service/swagger/InstanceController';
	import deployConfig from "./deploy/deployConfig" ;

	export default {
	  components: {
	    pageTitle,
	    card,
	    deployConfig,
	  },
	  data() {
	    return {
	    	pageTitle: "部署实例",
	    	loading:false,
	    	id:this.$route.query.id,
	    	deployType : this.$route.query.deployType,
	    	templateType : this.$route.query.templateType,
	    	
	    	cardData:null,
	      pageData : {},
	      formData : {},
	      cardConfig:{
	      		name:'名称',
	      		appType : "应用类型",
	      		appVersion:'当前版本',
	      		status:'状态',
	          deployType:'部署类型',
	          instCounts:"实例数",
	          createTime:'创建日期',
	          repositoryType:"仓库类型",
	      },
	    };
	  },
	  mounted() {
	  	this.initPage();
    },
    
	  methods: {
	  	
	    initPage(){
        	if(!this.id){
        		return ;
        	}
          getTemplateById(this.id).then(ret=>{
              if(!ret.code&&ret.data){
              	this.pageData = ret.data ;
              	this.initCardData();
              	this.$refs.deployConfig.initConfigs(this.pageData);
              	this.$refs.deployConfig.initTypes(this.pageData);
              }
          })
          
          //this.$refs.shiliList.search()
        },
        
        initCardData(){
					let data = {};
					for(let i in this.pageData){
						const _name = this.cardConfig[i]
						if(_name){
							if(i=='status'){
								data[_name] = {
									html : tmpStatusFilter(this.pageData[i])
								};
							}else if(i=='deployType'){
								data[_name] = {
									html : deployTypeFilter(this.pageData[i],this.pageData.templateType)
								};
							}else{
								data[_name] = this.pageData[i];
							}
						}
					}
					this.cardData = data;
				},
				
				startDeploy(){
					this.$refs.deployConfig.validateForm({
						onSuccess : (data)=>{
							this.formData = data ;
							this.postDeploySubmit()
						},
						onError : (index)=>{
							
						}
					})
				},
				
				postDeploySubmit(){
					const formData = this.formData ;
					
					this.loading = true ;
					let params = {
						appName : formData.appName ,
						clusterName : formData.clusterName ,
						templateId : formData.templateId ,
						
						deployModel : formData.deployModel ,
						deployModelText : formData.deployModelText ,
						deployInstCounts : formData.deployInstCounts ,
						
						ips : formData.ips ,
						attr : formData.varsInfo.filter(el=>{ return el.varsValue!=undefined && (el.varsName != '' || el.varsValue != '')}) ,
						instConfigs : formData.templateConfigs ,
						rela : formData.relaInfo ,
						spec : formData.relaInfo ,
					}
					deploy(params).then(ret=>{
						this.loading = false ;
						if(!ret.code){
							if(this.templateType!=2){
								// 跳转应用实例
								this.$router.push({
									path : "/sl/yy",
								});
							}else{
								// 跳转组件实例
								this.$router.push({
									path : "/sl/zj",
								});
							}
						}
					})
				},
				
				
	  }
	};
</script>

<style lang="scss">
	@import "../../../styles/variables.scss";
	
	.add-app {
		.el-alert.el-alert--info{
			margin-bottom: 20px;
			background: none ;
			line-height: 1.25;
			border: 1px solid $borderGrey;
		}
	}
	
</style>